import  { FC, useRef, useMemo } from "react";
import {
  Space,
  Button,
  Typography,
  Input,
  Tooltip,
  message,
  Popover,
  QRCode,
} from "antd";
import type { InputRef } from "antd";
import { LeftOutlined, CopyOutlined, QrcodeOutlined } from "@ant-design/icons";
import { useNavigate, useParams } from "react-router-dom";
import useGetPageInfo from "../../../../../hooks/useGetPageInfo";



const { Title } = Typography;

const StatHeader: FC = () => {
  const nav = useNavigate();
  const { _id } = useParams();

  const { title, isPublished } = useGetPageInfo();

  // 拷贝链接
  const urlInputRef = useRef<InputRef>(null);
  function copy() {
    const elem = urlInputRef.current;
    if (elem == null) return;
    elem.select(); // 选中 input 的内容
    document.execCommand("copy"); // 拷贝选中内容 （富文本编辑器的操作）
    message.success("拷贝成功");
  }



  // 使用 useMemo 1. 依赖项是否经常变化; 2. 缓存的元素是否创建成本较高
  const LinkAndQRCodeElem = useMemo(() => {
    if (!isPublished) return null;

    // 拼接 url ，需要参考 C 端的规则
    const url = `http://localhost:3000/${_id}`;

    // 定义二维码组件
    const QRCodeElem = (
      <div style={{ textAlign: "center" }}>
        <QRCode value={url} size={150} />
      </div>
    );

    return (
      <Space>
        <Input value={url} style={{ width: "300px" }} ref={urlInputRef} />
        <Tooltip title="拷贝链接">
          <Button icon={<CopyOutlined />} onClick={copy}></Button>
        </Tooltip>
        <Popover content={QRCodeElem}>
          <Button icon={<QrcodeOutlined />}></Button>
        </Popover>
      </Space>
    );
  }, [_id, isPublished]); 

  return (
    <div className='bg-#fff b-b-1 b-solid b-#e8e8e8 py-3'>
      <div className='flex mx-6'>
        <div className='flex-1'>
          <Space>
            <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
              返回
            </Button>
            <Title style={{fontSize:'18px' ,marginBottom:'0',lineHeight:'1'}}>{title}</Title>
          </Space>
        </div>
        <div className='flex-1 text-center'>{LinkAndQRCodeElem}</div>
        <div className='flex-1 text-right'>
          <Button type="primary" onClick={() => nav(`/question/edit/${_id}`)}>
            编辑问卷
          </Button>
        </div>
      </div>
    </div>
  );
};

export default StatHeader;
